<template>
  <div class="pl20 pr20">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="200px" status-icon label-position="left">
      <el-divider content-position="left">
        <el-text type="primary">积分规则设置</el-text>
      </el-divider>
      <el-form-item label="开启积分功能" prop="enableIntegral">
        <el-radio-group v-model="ruleForm.enableIntegral">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">不开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="规则1、单品积分规则设置" prop="isFoodIntegral">
        <el-radio-group v-model="ruleForm.isFoodIntegral">
          <el-radio :label="true">开启</el-radio>
          <el-radio :label="false">不开启</el-radio>
        </el-radio-group>
        <el-text class="ml20" type="info">(说明:按菜品资料积分率积分)</el-text>
      </el-form-item>
      <el-form-item label="规则2、消费金额积分比例" prop="consumeIntegral">
        <el-input-number class="width320" v-model="ruleForm.consumeIntegral" :controls="false" />
        <el-text class="ml20" type="info"> 积分(消费多少元积1分) </el-text>
      </el-form-item>
      <el-form-item label="规则3、特价菜品积分设置" prop="specialIntegral">
        <el-input-number class="width320" v-model="ruleForm.specialIntegral" :controls="false" />
        <el-text class="ml20" type="info"> 积分(消费多少元积1分, -1表示特价菜不积分)</el-text>
      </el-form-item>
      <el-form-item label="规则4、积分抵现规则设置" prop="integralToCash">
        <el-input-number class="width320" v-model="ruleForm.integralToCash" :controls="false" />
        <el-text class="ml20" type="info"> 积分抵现金(扣减多少积分抵1元) </el-text>
      </el-form-item>
      <el-form-item label="规则5、关联子母卡积分" prop="parentIntegral">
        <el-input-number class="width320" v-model="ruleForm.parentIntegral" :controls="false" />
        <el-text class="ml20" type="info"> 主卡积分时关联卡是否同时积分 </el-text>
      </el-form-item>
      <el-divider content-position="left">
        <el-text type="primary">消费规则设置</el-text>
      </el-divider>
      <el-form-item label="赠送帐户消费规则" prop="giftConsumRuleType">
        <el-select class="width320" v-model="ruleForm.giftConsumRuleType">
          <el-option v-for="item in giftRules" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.giftConsumRuleType === 3" label="消费比例" prop="giftproportion">
        <el-input-number class="width100" :controls="false" v-model="ruleForm.giftproportion" />
        <el-text class="ml10 mr10">:</el-text>
        <el-input-number class="width100" :controls="false" v-model="ruleForm.rechargeProportion" />
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm(ruleFormRef)" type="primary">保存更改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup name="points">
import { reactive, ref, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { editUserIntegralRules } from "@/api/modules/system";
import { giftRules } from "@/utils/serviceDict";

interface RuleForm {
  id: string | number;
  enableIntegral: boolean;
  isFoodIntegral: boolean;
  consumeIntegral: number;
  integralToCash: number;
  parentIntegral: number;
  specialIntegral: number;
  giftConsumRuleType: number;
  giftproportion: number;
  rechargeProportion: number;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref<FormInstance<RuleForm>>({
  id: 0,
  enableIntegral: false,
  isFoodIntegral: false,
  consumeIntegral: 0,
  integralToCash: 0,
  parentIntegral: 0,
  specialIntegral: 0,
  giftConsumRuleType: 1,
  giftproportion: 0,
  rechargeProportion: 0
});
const rules = reactive<FormRules<RuleForm>>({
  isUnseal: [{ required: true, message: "", trigger: "blur" }]
});

interface Props {
  memberList: RuleForm;
}
const prop = defineProps<Props>();
watch(
  () => prop.memberList,
  val => {
    if (val) {
      ruleForm.value = val;
    }
  },
  {
    deep: true,
    immediate: true
  }
);

const submitForm = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await editUserIntegralRules(ruleForm.value);
      ElMessage.success({ message: "修改成功!" });
    } catch (error) {
      console.log(error);
    }
  });
};
// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   await formEl.validate(valid => {
//     if (valid) {
//       editUserIntegralRules(ruleForm).then(res => {
//         console.log(res);
//       });
//     }
//   });
// };

// onMounted(() => {

//   getUserIntegralRulesInfo().then(res => {
//     ruleForm.value = res.data;
//   });
// });
</script>
